<template>
  <section>
    <section class="mb-16">
      <a-button @click="currTab = 0; getData()" :ghost="currTab !== 0" type="primary">维保历史</a-button>
      <a-button @click="currTab = 1; getData()" class="mx-16" :ghost="currTab !== 1" type="primary">租借历史</a-button>
      <a-button @click="currTab = 2; getData()" :ghost="currTab !== 2" type="primary">验车历史</a-button>
    </section>
    <section style="min-height: calc(100vh - 480px); max-height: calc(100vh - 280px); overflow: auto">
      <a-table
        key="0"
        v-show="currTab === 0"
        :columns="maintenanceColumns"
        :data-source="maintenanceData"
        :pagination="false"
      >
        <template #pickupAndPickOffTime="val, data">
          <section class="mb-4">取车时间：{{ data.realityPickupTime }}</section>
          <section>还车时间：{{ data.realityReturnTime }}</section>
        </template>
        <template #maintainType="maintainType">
          {{ $utils.getEnumName(maintainSheetTypeEnums, maintainType) }}
        </template>
        <template #maintainItem="maintainItem">
          {{ maintainItemEnums.filter(item => maintainItem.split(',').filter(e => e).includes(`${item.value}`)).map(e => e.name).join('、') }}
        </template>
      </a-table>
      <a-table
        key="1"
        v-show="currTab === 1"
        :columns="leaseColumns"
        :data-source="leaseData"
        :pagination="false"
      >
        <template #pickupAndPickOffTime="val, data">
          <section class="mb-4">取车时间：{{ data.pickupTime }}</section>
          <section>还车时间：{{ data.returnTime }}</section>
        </template>
        <template #checkVehicleUrl="checkVehicleUrl">
          <a v-if="checkVehicleUrl" :href="checkVehicleUrl" target="_blank">{{ checkVehicleUrl }}</a>
        </template>
      </a-table>
      <a-table
        key="2"
        v-show="currTab === 2"
        :columns="vehicleInspectionColumns"
        :data-source="vehicleInspectionData"
        :pagination="false"
      >
        <template #pickupAndPickOffTime="val, data">
          <section class="mb-4">取车时间：{{ data.pickupTime }}</section>
          <section>还车时间：{{ data.returnTime }}</section>
        </template>
        <template #isPeccancy="isPeccancy">
          {{ isPeccancy ? '是' : '否' }}
        </template>
        <template #checkVehicleUrl="checkVehicleUrl">
          <a v-if="checkVehicleUrl" :href="checkVehicleUrl" target="_blank">{{ checkVehicleUrl }}</a>
        </template>
      </a-table>
    </section>
  </section>
</template>
<script>
import {getVehicleCheckHistoryInfo, getVehicleLeaseHistoryInfo, getVehicleMaintainHistory} from '@/api/store/index'
export default {
  name: 'CarHistoryList',
	props: {
    vehicleId: {
      type: Number,
			required: true
		}
	},
	data() {
    return {
      currTab: 0,
      maintainSheetTypeEnums: [],
      maintainItemEnums: [],
      maintenanceColumns: [
        {dataIndex: 'pickupAndPickOffTime', title: '取还车时间', width: 220, align: 'center', scopedSlots: {customRender: 'pickupAndPickOffTime'}},
        {dataIndex: 'maintainType', title: '维修类型', align: 'center', scopedSlots: {customRender: 'maintainType'}},
        {dataIndex: 'maintainItem', width: '30%', title: '维修项目', align: 'center', scopedSlots: {customRender: 'maintainItem'}},
        {dataIndex: 'returnCurrentMileage', title: '还车公里数', align: 'center', scopedSlots: {customRender: 'returnCurrentMileage'}},
        {dataIndex: 'returnCurrentFuel', title: '还车油量', align: 'center', scopedSlots: {customRender: 'returnCurrentFuel'}},
        {dataIndex: 'id', title: '维保单号', align: 'center'}
      ],
      maintenanceData: [],
      leaseColumns: [
        {dataIndex: 'customerName', title: '承租人', align: 'center', width: 100},
        {dataIndex: 'pickupAndPickOffTime', title: '取还车时间', align: 'center', width: 220, scopedSlots: {customRender: 'pickupAndPickOffTime'}},
        {dataIndex: 'rentDay', title: '租期', width: 100, align: 'center', customRender: rentDay => this.$utils.formatHours(rentDay)},
        {dataIndex: 'storeName', width: 200, title: '取还车门店', align: 'center'},
        {dataIndex: 'isPickupOnDoor', width: 120, title: '是否上门服务', align: 'center', customRender: isPickupOnDoor => isPickupOnDoor ? '是' : '否'},
        {dataIndex: 'isPeccancy', title: '是否违章', width: 100, align: 'center', customRender: isPeccancy => isPeccancy ? '是' : '否'},
        {dataIndex: 'contractNo', title: '合同号', width: 120, align: 'center'}
      ],
      leaseData: [],
      vehicleInspectionColumns: [
        {dataIndex: 'customerName', title: '承租人', align: 'center', width: 100},
        {dataIndex: 'pickupAndPickOffTime', title: '取还车时间', align: 'center', width: 220, scopedSlots: {customRender: 'pickupAndPickOffTime'}},
        {dataIndex: 'rentDay', title: '租期', width: 100, align: 'center', customRender: rentDay => this.$utils.formatHours(rentDay)},
        {dataIndex: 'storeName', width: 220, title: '取还车门店', align: 'center'},
        {dataIndex: 'isPeccancy', title: '是否违章', width: 100, align: 'center', customRender: isPeccancy => isPeccancy ? '是' : '否'},
        {dataIndex: 'checkVehicleUrl', title: '验车单', align: 'center', width: 140, scopedSlots: {customRender: 'checkVehicleUrl'}},
        {dataIndex: 'contractNo', title: '合同号', width: 140, align: 'center'}
      ],
      vehicleInspectionData: []
    }
  },
	async created() {
    this.maintainSheetTypeEnums = await this.$utils.getDictList('MaintainSheetType')
    this.maintainItemEnums = await this.$utils.getDictList('MaintainItem')
    this.$watch('vehicleId', vehicleId => {
      console.log(vehicleId)
      vehicleId && this.getData()
		}, {immediate: true})
	},
	methods: {
    getData() {
      if (this.currTab === 0) {
        getVehicleMaintainHistory({vehicleId: this.vehicleId}).then(data => {
          this.maintenanceData = data
        })
      } else if (this.currTab === 1) {
        getVehicleLeaseHistoryInfo({vehicleId: this.vehicleId}).then(data => {
          this.leaseData = data
        })
      } else {
        getVehicleCheckHistoryInfo({vehicleId: this.vehicleId}).then(data => {
          this.vehicleInspectionData = data
        })
      }
    }
	}
}
</script>
